
<template>
  <div class="header">
    <div class="header-left">
      <i class="iconfont icon-fanhui"></i>
    </div>
    <div class="header-input">输入城市/景点/游玩主题</div>
    <router-link to="/City">
      <div class="header-right">城市</div>
    </router-link>
  </div>
</template>

<script>
export default {
  name: "HomeHeader",
};
</script>

<style lang="scss" scoped>
@import "@/assets/css/main.scss";
.header {
  display: flex;
  line-height: 56px;
  background: $background;
  color: #fff;
  .header-left {
    width: 32px;
  }
  .header-input {
    flex: 1;
    background: #fff;
    margin: 12px 0;
    height: 30px;
    border: 1px solid #ccc;
    border-radius: 5px;
    color: #ccc;
    line-height: 30px;
    text-align: left;
    padding-left: 7.5px;
  }
  a {
    text-decoration: none;
  }
  .header-right {
    width: 62px;
    text-align: center;
    color: #fff;
  }
}
</style>